<template>
  <base-breadcrumb>
    <a-row
      :gutter="24"
      class="page-height"
    >
      <!-- 左侧列表 -->
      <a-col :span="5">
        <a-card
          v-loading="loading"
          class="page-height-tree"
        >
          <div class="l-wrapper">
            <div
              v-for="(item, index) in classList"
              :key="index"
              class="left-TypeList"
              :class="{ active: selectRow.id === item.id}"
              @click="rowClick(item)"
            >
              {{ item.typeName }}
            </div>
          </div>
        </a-card>
      </a-col>
      <!-- 右侧表格 -->
      <a-col
        :span="19"
        class="page-height-list-wrapper"
      >
        <a-card class="page-height-list">
          <a-button
            class="mb12"
            type="primary"
            @click="add"
            v-if="hideBuquBtn()"
          >新增</a-button>
          <list-table
            ref="table"
            :columns="columns"
            :request="loadData"
            :page-keys="['pageNo','pageSize','totalSize']"
            :show-page="false"
            :isScrollX="false"
          >
            <div
              slot="actions"
              slot-scope="text, record"
              class="pub-table-list-action"
              v-if="hideBuquBtn()"
            >
              <span @click="edit(record)">编辑</span>
              <span
                v-if="record.status*1===1&&hideBuquBtn()"
                @click="del(record)"
              >删除</span>
            </div>
            <template
              slot="status"
              slot-scope="text, record"
            >
              {{getStatusName(record.status)}}

            </template>
          </list-table>
        </a-card>
      </a-col>
    </a-row>
    <add
      :visible.sync="visible"
      :form="form"
      @ok="$refs.table.refresh()"
    />
  </base-breadcrumb>
</template>

<script>
import add from './add'
import api from '@/api/safetySupervision/base/licensingReason'
export default {
  name: 'a' + Date.now(),
  data() {
    return {
      visible: false,
      visible1: false,
      loading: false,

      classList: [],
      selectRow: { value: 1 },
      form: {},
      columns: [
        {
          title: '发牌原因',
          dataIndex: 'dealReason',
          width: 350
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: 150,
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '操作',
          dataIndex: 'actions',
          width: 150,
          scopedSlots: { customRender: 'actions' }
        }
      ],
      loadData: async (parameter) => {
        if (this.selectRow.id) {
          return api.getPrimaryKeySelectiveList({ classificationId: this.selectRow.id }).then((res) => {
            return { code: 200, data: res.data }
          })
        }
        return { code: 200, data: [] }
      }
    }
  },
  components: {
    add
  },
  created() {
    this.getClassList()
  },
  mounted() {},
  methods: {
    getStatusName(status) {
      let statusName = status * 1 === 0 ? '可用' : status * 1 === 1 ? '不可用' : null
      return statusName
    },
    async getClassList() {
      this.loading = true
      let data = await api.getClassList({})
      this.loading = false
      if (data?.msg === '成功') {
        this.classList = data.data
        this.selectRow = this.classList[0] || { id: '' }
        this.$refs.table.refresh()
      }
    },
    // // 点击左边列表
    rowClick(item) {
      this.selectRow = item
      this.$refs.table.refresh()
    },
    del(record) {
      let that = this
      this.$confirm({
        title: '确定是否删除数据？',
        okText: '是',
        okType: 'danger',
        cancelText: '否',
        onOk() {
          that.loading = true
          api.deletePrimaryKeySelective({ id: record.id }).then((res) => {
            let msg = res.message || '删除成功'
            if (res.code * 1 === 0) {
              that.loading = false
              that.$refs.table.refresh()
              that.$message.success(msg)
            }
          })
        },
        onCancel() {}
      })
      // this.$delList2(
      //   api.deletePrimaryKeySelective,
      //   (res) => {
      //     this.$refs.table.refresh()
      //   },
      //   { id:record.id },
      //   null
      // )
    },
    add() {
      if (this.selectRow.id) {
        this.form = { status: 0, typeName: this.selectRow.typeName, classificationId: this.selectRow.id }
        this.visible = true
      } else {
        this.$noticeWarning('请选择分类')
      }
    },
    edit(record) {
      if (this.selectRow.id) {
        this.form = { ...record, typeName: this.selectRow.typeName }
        console.log(this.form)
        this.visible = true
      } else {
        this.$noticeWarning('请选择分类')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.option-btns {
  button {
    margin-right: 0.5rem;
  }
}

.l-wrapper {
  overflow: auto;
  height: calc(var(--heightVh) - 15rem);
}

.left-TypeList {
  margin: 10px 0;
  background: white;
  padding: 10px;
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
  border-radius: 5px;

  &.active {
    background: #0e7ed0 !important;
    color: white;
  }

  &.disabled {
    //cursor: not-allowed;
    background: gray;
    color: white;
  }
}
</style>
